/* 基础变量定义 */
:root {
  --primary: #6C5CE7; /* 统一为vsGame.html中的颜色 */
  --secondary: #10B981;
  --fire: #E74C3C;     /* 统一 */
  --water: #3498DB;    /* 统一 */
  --grass: #2ECC71;    /* 统一 */
  --electric: #F1C40F; /* 统一 */
  --rock: #95A5A6;     /* 统一 */
  --psychic: #9B59B6;  /* 统一 */
  --hp: #E74C3C;       /* 统一 */
  --mp: #3498DB;       /* 统一 */
  --background: #1A1A2E; /* 统一 */
  --card: #16213E;     /* 统一 */
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-900: #111827; /* 从vsGame.html中添加 */

  /* 新增属性颜色 */
  --algorithm: #4CAF50; /* 成成 - 算法系 (绿色) */
  --retro: #E91E63;     /* 凡凡 - 复古系 (粉色) */
  --geography: #8BC34A; /* 娇娇 - 地理系 (浅绿) */
  --basketball: #FF9800; /* 老哥 - 篮球系 (橙色) */
  --mecha: #2196F3;     /* 涛涛 - 机甲系 (蓝色) */
  --rhetoric: #9C27B0;  /* 文鑫 - 嘴炮系 (紫色) */

  /* 战斗页面固定高度变量 (主要用于底部操作区) */
  --header-h: 44px; /* 顶部标题条固定高度 */
  --turn-indicator-h: 40px; /* 回合提示固定高度 */
  --pause-button-h: 48px; /* 暂停按钮固定高度 */
  --skill-grid-h: 180px; /* 技能按钮网格固定高度 (2 * 86px + 8px gap) */
  --battle-info-padding-v: 20px; /* 底部操作区垂直内边距 (0.5rem + 0.75rem + 0.75rem ≈ 20px) */

  /* 日志容器最小高度，用于计算 battle-info 总高度 */
  --log-min-h: 80px;
}

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  -webkit-text-size-adjust: 100%; /* 防止移动端文本自动缩放 */
  touch-action: manipulation; /* 优化触控响应 */
}

body {
  font-family: 'Press Start 2P', 'Arial', sans-serif; /* 确保字体优先加载 */
  background-color: var(--background);
  color: #FFFFFF;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
}

/* 颜色类 */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-fire { background-color: var(--fire); }
.bg-water { background-color: var(--water); }
.bg-grass { background-color: var(--grass); }
.bg-electric { background-color: var(--electric); }
.bg-rock { background-color: var(--rock); }
.bg-psychic { background-color: var(--psychic); }
.bg-hp { background-color: var(--hp); }
.bg-mp { background-color: var(--mp); }
.bg-background { background-color: var(--background); }
.bg-card { background-color: var(--card); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-800 { background-color: #1F2937; } /* 从 game.js 推断的颜色 */

/* 新增属性背景颜色类 */
.bg-algorithm { background-color: var(--algorithm); }
.bg-retro { background-color: var(--retro); }
.bg-geography { background-color: var(--geography); }
.bg-basketball { background-color: var(--basketball); }
.bg-mecha { background-color: var(--mecha); }
.bg-rhetoric { background-color: var(--rhetoric); }


/* 文本颜色类 */
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-hp { color: var(--hp); }
.text-mp { color: var(--mp); }
.text-white { color: #FFFFFF; }
.text-gray-400 { color: var(--gray-400); }
.text-gray-300 { color: var(--gray-300); }

/* 新增属性文本颜色类 (如果需要) */
.text-algorithm { color: var(--algorithm); }
.text-retro { color: var(--retro); }
.text-geography { color: var(--geography); }
.text-basketball { color: var(--basketball); }
.text-mecha { color: var(--mecha); }
.text-rhetoric { color: var(--rhetoric); }


/* 文本样式 */
.font-game { font-family: 'PressStart2P', cursive; }
.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-bold { font-weight: bold; }

/* 布局与间距类 */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-10 { margin-top: 2.5rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-4 { margin-right: 1rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

/* 弹性布局类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; }

/* 网格布局类 */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* 边框和圆角类 */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-gray-700 { border-color: var(--gray-700); }
.border-primary { border-color: var(--primary); }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* 尺寸类 */
.w-full { width: 100%; }
/* 移除 img 标签上的 w/h 尺寸类，由 CSS 统一控制 */
/* .w-24, .w-40, ... .h-24, .h-40 etc. 应该从 HTML 中的 img 上移除 */
.min-h-screen { min-height: 100vh; }

/* 按钮样式 */
.skill-button {
  transition: all 0.2s ease;
}
.skill-button:hover {
  transform: translateY(-2px);
}
.skill-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 其他视觉样式 */
.opacity-10 { opacity: 0.1; }
.opacity-50 { opacity: 0.5; }
.blur-3xl { filter: blur(40px); }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.hidden { display: none !important; } /* 工具类 */

/* 过渡效果 */
.transition-all { transition: all 0.3s ease; }

/* 阴影效果 */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* 鼠标悬停效果 */
.hover\:bg-primary\/20:hover { background-color: rgba(59, 130, 246, 0.2); }
.hover\:bg-primary\/80:hover { background-color: rgba(59, 130, 246, 0.8); }
.hover\:bg-gray-600:hover { background-color: var(--gray-600); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:shadow-primary\/20:hover { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

/* 变换效果 */
.transform { transform: translateZ(0); }
.hover\:scale-105:hover { transform: scale(1.05); }


/* ------- 动画定义 ------- */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .95; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes shake { /* 战斗命中抖动 */
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
@keyframes damage { /* 伤害数字上浮 */
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}
@keyframes healPopup { /* 治疗数字上浮 */
  0% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -20px); }
}
@keyframes highlight-green { /* 玩家回合高亮 */
  from { box-shadow: 0 0 5px rgba(46, 204, 113, .5); }
  to { box-shadow: 0 0 18px rgba(46, 204, 113, .8); }
}
@keyframes highlight-red { /* 敌人回合高亮 */
  from { box-shadow: 0 0 5px rgba(231, 76, 60, .5); }
  to { box-shadow: 0 0 18px rgba(231, 76, 60, .8); }
}
@keyframes fx-pop{ /* 贴头像文字特效 */
  0%   { transform: translate(-50%, 6px) scale(.9); opacity: 0; }
  15%  { transform: translate(-50%, -2px) scale(1.06); opacity: 1; }
  60%  { transform: translate(-50%, -8px) scale(1.0); opacity: .98; }
  100% { transform: translate(-50%, -16px) scale(.98); opacity: 0; }
}

/* ------- 通用屏幕/菜单样式 ------- */
.start-screen,
.character-selection,
.battle-container {
  height: 100svh; /* 严格使用svh确保一屏高度 */
  min-height: auto; /* 覆盖可能存在的min-height:100dvh */
  overflow: hidden; /* 禁止滚动 */
  background: var(--background);
  color: white;
  padding: 1rem;
  display: flex;
  flex-direction: column; /* 确保这些容器也是flex列布局 */
  justify-content: center;
  align-items: center;
}


.title {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
  text-align: center;
}

.subtitle {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overscroll-behavior: contain;
}

.modal-content {
  background: var(--card);
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  max-width: 500px;
  width: 90%;
}

.btn {
  padding: .75rem 1.5rem;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: bold;
  margin: .5rem;
  font-size: 1rem;
  min-width: 120px;
}

.btn-primary {
  background: var(--primary);
  color: white;
}

.btn-secondary {
  background: var(--gray-700);
  color: white;
}


/* --- 角色选择界面 (新的水平滑动设计) --- */
.character-selection {
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); /* 移除左右内边距，交给 character-grid 处理 */
  justify-content: flex-start; /* 标题居顶 */
  /* align-items: center; 已经存在于 .start-screen, .character-selection, .battle-container */
}
.character-selection .title {
  font-size: 1.25rem;
  margin: 0 0 1rem 0; /* 调整标题间距 */
  padding: 0 1rem; /* 保持标题左右有内边距 */
}
/* 角色选择容器：变为水平滚动 */
.character-grid {
  width: 100%;
  display: flex;
  flex-direction: row; /* 水平排列 */
  overflow-x: auto; /* 允许水平滚动 */
  scroll-snap-type: x mandatory; /* 强制吸附滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  padding: 0 1rem; /* 左右内边距，让卡片边缘露出来 */
  gap: 1rem; /* 卡片之间的间距 */
  margin-bottom: 1rem; /* 与下方按钮的间距 */

  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
/* Webkit 浏览器隐藏滚动条 */
.character-grid::-webkit-scrollbar {
  display: none;
}

/* 角色卡片 */
.character-card {
  flex-shrink: 0; /* 防止卡片收缩 */
  width: 85vw; /* 每个卡片占据视口宽度的85% */
  max-width: 320px; /* 限制最大宽度，防止在大屏幕上过宽 */
  background: var(--card);
  border-radius: 10px;
  padding: 1rem; /* 增加内边距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px; /* 增加最小高度以容纳更多信息 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(108, 92, 231, 0.3);
  cursor: pointer;
  scroll-snap-align: center; /* 滚动吸附到中心 */
}
.character-card:hover {
  transform: scale(1.03); /* 略微减小 hover 放大效果，避免卡片过大影响滑动 */
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.2);
}
.character-card .strip { height: 4px; border-radius: 10px 10px 0 0; margin: -1rem -1rem 1rem -1rem; /* 扩展条带到卡片边缘 */ }
.character-card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.character-card .name { font-size: 1.1rem; font-weight: 700; }
.character-card .badge { padding: 4px 8px; border-radius: 999px; font-size: .7rem; color: #fff; }
.character-card .avatar-wrap { display: flex; justify-content: center; margin: 0.75rem 0 1rem; }
.character-card .avatar { width: 72px; height: 72px; object-fit: cover; border-radius: 999px; border: 2px solid var(--primary); }

/* 角色选择页面的卡片描述 */
.character-card .desc {
  display: block;
  font-size: 0.7rem; /* 描述字体更小 */
  margin-bottom: 0.75rem;
  min-height: 36px; /* 确保有足够空间显示两行描述 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  -webkit-box-orient: vertical;
  color: var(--gray-300);
  text-align: left; /* 描述左对齐 */
}

/* 新的属性网格布局 */
.character-card .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列布局 */
  gap: 0.5rem; /* 网格间距 */
  margin-top: 0.5rem;
  margin-bottom: 1rem; /* 与选择按钮的间距 */
}
.character-card .stats-grid .stat-item {
  display: flex;
  align-items: center;
  font-size: 0.75rem; /* 属性字体大小 */
  color: var(--gray-300);
}
.character-card .stats-grid .stat-item i {
  margin-right: 6px;
  min-width: 16px; /* 确保图标对齐 */
  text-align: center;
}
.character-card .stats-grid .stat-item span {
    font-weight: bold; /* 属性值加粗 */
}


.character-card .select {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  padding: 10px 0; /* 调整选择按钮大小 */
  font-size: 1rem;
}

/* 移除旧的媒体查询 */
/* @media (max-width: 600px) 和 @media (max-width: 380px) 的相关部分已移除 */


/* --- 战斗界面布局 (统一和优化) --- */
.battle-container {
  display: flex;
  flex-direction: column;
  height: 100svh; /* 严格使用svh确保一屏高度 */
  min-height: auto;
  overflow: hidden; /* 禁止滚动 */
}

/* 顶部标题栏固定高度 */
.battle-header {
  height: var(--header-h);
  flex-shrink: 0; /* 防止被挤压 */
  padding: 0 .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border-bottom: 1px solid var(--gray-700);
}

/* 底部操作区域：固定高度，日志内部滚动 */
.battle-info {
  flex-shrink: 0; /* 防止被挤压 */
  /* 根据所有子元素的高度之和来计算总高度 */
  height: calc(
      var(--turn-indicator-h) +
      var(--log-min-h) +
      var(--skill-grid-h) +
      var(--pause-button-h) +
      var(--battle-info-padding-v)
  );
  background: var(--card);
  border-top: 1px solid var(--gray-700);
  padding: .5rem .75rem .75rem; /* ~20px 垂直内边距 */
  display: flex;
  flex-direction: column;
}

/* 回合指示器 */
.turn-indicator {
  height: var(--turn-indicator-h); /* 固定高度 */
  margin: 0 auto .3rem; /* 居中并保留底部间距 */
  display: flex; /* 让文字垂直居中 */
  align-items: center;
  justify-content: center;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all .3s ease;
  text-align: center;
  max-width: 200px;
  font-size: 1.1rem;
  animation: pulse 1.2s infinite; /* 统一脉冲动画 */
}
.turn-player {
  background-color: rgba(46, 204, 113, .25);
  color: #2ecc71;
  border: 2px solid #2ecc71;
  animation: pulse 1.2s infinite, highlight-green 2s infinite alternate;
}
.turn-enemy {
  background-color: rgba(231, 76, 60, .25);
  color: #e74c3c;
  border: 2px solid #e74c3c;
  animation: pulse 1.2s infinite, highlight-red 2s infinite alternate;
}


/* 日志容器：占据弹性空间，并确保滚动 */
#log-container {
  min-height: var(--log-min-h); /* 确保最小高度可见 */
  flex-grow: 1; /* 允许其在有额外空间时增长 */
  max-height: 150px; /* 限制日志最大高度，防止其挤压技能按钮过多 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, .25);
  border-radius: .5rem;
  margin-bottom: .55rem;
}
#battle-log { list-style: none; padding: 0; margin: 0; }
#battle-log li { margin-bottom: .25rem; font-size: .875rem; }

/* 技能按钮区域 */
.skills-container {
  flex-shrink: 0; /* 防止被挤压 */
  height: var(--skill-grid-h); /* 固定高度 */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2 网格 */
  gap: .5rem;
}
.skill-button {
  background: var(--gray-700);
  border: 1px solid var(--gray-400);
  border-radius: .5rem;
  padding: .75rem .5rem;
  color: white;
  text-align: left;
  min-height: 86px; /* 最小高度保证可点击 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 暂停按钮 */
#pause-button {
  height: var(--pause-button-h); /* 固定高度 */
  margin-top: .5rem; /* 增加与技能按钮区的间距 */
}

/* 中部对战区域：占据所有剩余空间 */
.battle-field {
  flex: 1; /* 占据所有剩余的垂直空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* 均匀分布敌我区域，增加间距 */
  /* 移除之前的 min-height/height calc */
}

/* 敌方/玩家区域：头像居左，状态条居右 */
.enemy-area,
.player-area {
  display: flex;
  flex-direction: row-reverse; /* 反转顺序，让头像显示在左 */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  position: relative; /* 为 status-fx 提供定位上下文 */
  flex: 1; /* 确保它们平分 battle-field 的空间 */
  min-height: 0; /* 允许 flex item 缩小 */
}

/* 状态条 */
.status-bar {
  position: static; /* 确保它在文档流中，不再绝对定位 */
  margin: 0;
  width: clamp(220px, 62vw, 340px); /* 响应式宽度，限制最大值 */
  background: rgba(0, 0, 0, .35);
  border-radius: .5rem;
  padding: .5rem .6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  z-index: 10;
}
.health-bar {
  height: 10px;
  background: var(--gray-700);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: .25rem;
}
.health-fill {
  height: 100%;
  background: var(--hp);
  transition: width .25s ease;
}
.mana-fill {
  height: 100%;
  background: var(--mp);
  transition: width .25s ease;
}

/* 角色头像及其父容器 */
.enemy-area > .relative, .player-area > .relative {
  position: relative; /* 确保它是 status-fx 的定位上下文 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 移除不必要的 min-width/height，让 img 决定大小 */
  overflow: visible; /* 关键：确保动画不会被裁剪 */
}

#enemy-sprite,
#player-sprite {
  width: auto;
  height: auto;
  object-fit: contain;
  /* 精细控制头像高度，使其在不同屏幕高度下保持合适比例 */
  height: clamp(88px, 18vh, 132px); /* 使用 clamp 确保最小最大限制 */
  max-width: 100%; /* 限制宽度不超过其父容器 */
}

/* 敌人技能列表（仅在桌面端显示） */
#enemy-skills {
  display: none; /* 默认隐藏 */
  max-height: 100%;
  overflow: hidden;
}
@media (min-width: 768px) { /* 桌面端显示 */
  #enemy-skills {
      display: block;
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      width: 12rem; /* w-48 */
      max-width: 16rem; /* md:w-64 */
      background: var(--card);
      border-radius: 0.5rem;
      padding: 0.5rem;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 10;
  }
  #enemy-skills > div {
      background: var(--gray-800); /* 确保内层技能也有背景 */
      padding: 0.5rem; /* 增加内边距 */
      margin-bottom: 0.5rem; /* 增加间距 */
  }
}

/* 等级信息 */
.level-info {
  position: absolute;
  top: .5rem;
  right: .5rem;
  background: rgba(0, 0, 0, .5);
  padding: .5rem;
  border-radius: .5rem;
  font-size: .875rem;
  z-index: 15; /* 确保可见 */
}

/* 贴头像的文字特效 (命中/治疗/Buff/Debuff/提示) */
.status-fx {
  position: absolute;
  top: -24px; /* 进一步上移，使其更明显 */
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  opacity: 0;
  animation: fx-pop 900ms ease-out forwards;
  white-space: nowrap;
  pointer-events: none;
  color: #FFF; /* 默认颜色，如果类型特定颜色未设置 */
  z-index: 20; /* 确保在最上层 */
}


/* 战斗界面：小屏幕设备的微调 */
@media (max-width: 380px) {
  /* 进一步调整固定高度变量以适应更小的屏幕 */
  :root {
      --turn-indicator-h: 36px;
      --pause-button-h: 44px;
      --skill-grid-h: 160px; /* 2 * 75px + gap */
      --log-min-h: 70px;
  }
  #enemy-sprite, #player-sprite { height: clamp(75px, 16vh, 100px); }
  .skill-button { min-height: 75px; padding: .6rem .4rem; font-size: 0.9rem; }
}
@media (max-width: 330px) {
  /* 针对超小屏的额外调整 */
  .status-bar { width: clamp(210px, 64vw, 320px); }
  #enemy-sprite, #player-sprite { height: clamp(65px, 14vh, 90px); }
  .skill-button { min-height: 70px; font-size: 0.85rem; }
  :root {
      --skill-grid-h: 150px; /* 2 * 70px + gap */
      --log-min-h: 60px;
  }
}


/* 新增：状态图标容器和图标样式 */
.status-icons {
    display: flex;
    flex-wrap: wrap; /* 允许图标换行 */
    gap: 4px;
    margin-top: 8px;
    min-height: 24px; /* 至少保证一行图标的高度 */
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* 小图标 */
    height: 20px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: bold;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden; /* 防止内容溢出 */
}

.status-icon.buff { background-color: #2ECC71; } /* 绿色 */
.status-icon.debuff { background-color: #E74C3C; } /* 红色 */
.status-icon.stun { background-color: #F1C40F; } /* 黄色 */
.status-icon.silence { background-color: #9B59B6; } /* 紫色 */

.status-icon span.duration {
    position: absolute;
    bottom: 0px;
    right: 1px;
    font-size: 0.55em;
    color: #FFF;
    text-shadow: 0 0 2px rgba(0,0,0,0.7);
    line-height: 1;
}

/* 眩晕效果：叠加在角色精灵图上 */
.stunned-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(241, 196, 15, 0.3); /* 半透明黄色 */
  color: white;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  pointer-events: none; /* 关键：允许点击穿透，不遮挡其下方的元素 */
  /* 移除 animation: stun-flash 1s infinite alternate; 默认不闪烁，只在 active 时 */
  border-radius: 50%; /* 模拟模糊效果 */
  opacity: 0; /* 默认隐藏 */
  transition: opacity 0.3s ease-in-out; /* 平滑过渡 */
}

.stunned-overlay.active {
  opacity: 1;
  animation: stun-flash 1s infinite alternate; /* 只有 active 时才闪烁 */
}

@keyframes stun-flash {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}

/* 新增：状态图标容器和图标样式 */
.status-icons {
  display: flex;
  flex-wrap: wrap; /* 允许图标换行 */
  gap: 4px;
  margin-top: 8px;
  min-height: 24px; /* 至少保证一行图标的高度 */
}

.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* 小图标 */
  height: 20px;
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

.status-icon.buff { background-color: #2ECC71; } /* 绿色 */
.status-icon.debuff { background-color: #E74C3C; } /* 红色 */
.status-icon.stun { background-color: #F1C40F; } /* 黄色 */
.status-icon.silence { background-color: #9B59B6; } /* 紫色 */

.status-icon span.duration {
  position: absolute;
  bottom: 0px;
  right: 1px;
  font-size: 0.55em;
  color: #FFF;
  text-shadow: 0 0 2px rgba(0,0,0,0.7);
  line-height: 1;
}
